<template>
    <div>
        <a-form ref="formRef" @finish="handleFinish" :model="form" name="basic" :label-col="{ span: 8 }">

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="发票号码2" name="code" :rules="[{ required: true }]">
                        <!-- <a-input v-model:value="form.costcode" disabled style="width: 100%" placeholder="" /> -->
                        <!-- <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD" :disabled="isShow" v-model:value="form.paymentDate"
                            style="width: 100%" placeholder="" /> -->
                        <a-input v-model:value="form.code" :maxlength="12"  :disabled="isShow" style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="项目名称" name="proName" :rules="[{ required: true }]">
                        <!-- <a-input v-model:value="form.contractName" disabled style="width: 100%" placeholder="" /> -->
                        <a-input-search v-model:value="form.proName" style="width: 100%" placeholder="选择的项目"
                        @click="onSearch"     @search="onSearch" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="采购合同名称" name="contractId" :rules="[{ required: true }]">
                        <!-- <a-input v-model:value="form.contractName" :disabled="isShow" style="width: 100%" placeholder="" /> -->
                  
                        <a-input-search v-model:value="form.contractName" style="width: 100%" placeholder="选择的项目"
                        @click="onContractSearch"     @search="onContractSearch" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="合作商名称"  name="partyA">
                        <a-input v-model:value="form.partyA" disabled  style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="发票类型"  name="type" :rules="[{ required: true }]">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="form.type" placeholder="请选择" :options="invoiceType">
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">

                    <a-form-item label="开票金额" :rules="[{ required: true }]" name="amount">
                        <a-input v-model:value="form.amount" :disabled="isShow" style="width: 100%"
                            placeholder="" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="税率" name="taxPoint" :rules="[{ required: true }]">
                        <a-input v-model:value="form.taxPoint" :disabled="isShow" style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="不含税金额" :rules="[{ required: true }]" name="netAmount">
                        <a-input v-model:value="form.netAmount" :disabled="isShow" style="width: 100%"
                            placeholder="" />
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item label="开票日期" :rules="[{ required: true }]" name="invoiceTime">
                        <!-- <a-input v-model:value="form.invoicingDate" :disabled="isShow" style="width: 100%" placeholder="" /> -->
                        <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss"  :disabled="isShow" v-model:value="form.invoiceTime"
                            style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="发票照片" name="invoicePhoto">
                        <!-- <a-upload v-model:file-list="form.invoicePhoto" name="file"
                           :headers="headers"
                          >
                      
                            <a-button>
                                <upload-outlined></upload-outlined>
                                上传附件
                            </a-button>
                        </a-upload> -->

                        <fileUpload @uploadDone="uploadDone" ref="uploadRef" :uploadNumber="4"></fileUpload>
                    </a-form-item>
                </a-col>
            </a-row>




            <a-row :gutter="16" v-if="isShow">
                <a-col :span="12">
                    <a-form-item label="登记人" name="applicant">
                        <a-input v-model:value="form.applicant" disabled style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="登记部门" name="applicationDepartment">
                        <a-input v-model:value="form.applicationDepartment" disabled style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="备注" name="remark">
                        <a-textarea v-model:value="form.remark" :rows="4" placeholder="" style="width: 100%" />
                    </a-form-item>
                </a-col>
            </a-row>
            <!-- isShow:{{ isShow }} -->
            <!-- <a-form-item v-if="!isShow" :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" html-type="submit">保存</a-button>
                <a-button style="margin-left: 10px" @click="onClose">取消</a-button>
            </a-form-item> -->
        </a-form>
        <projectSelection ref="proSelect" @onClose="prSelectOk"  />
        <contractSelection ref="contractSelect" @onClose="contractSelectOk" />
    </div>
</template>
<script setup>
import api from '@/api/finance/ticketCollection/index'
import projectSelection from '@/components/pm/projectSelection.vue'
import contractSelection from '@/components/pm/contractSelection.vue'
import { invoiceType } from '@/utils/constants.js'
import fileUpload from '@/components/JqUpload/index.vue'


const form = ref({})
const formRef = ref()
const props = defineProps({
    isShow: {
        type: Boolean,
    }
})
const uploadRef = ref()
const uploadDone = (result) => {
    console.log("uploadDone", result)
    form.value.files = result
}
const contractSelect = ref()
const onContractSearch = () => {
    contractSelect.value.show()
}
const contractSelectOk =  (selectedRowKeys, selectRecords) => {
    form.value.contractId = selectRecords[0].id
    form.value.contractName = selectRecords[0].name
    form.value.partyA = selectRecords[0].partyA
}



const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    console.log("项目选择ok ", selectedRowKeys, selectRecords)
    form.value.proId = selectRecords[0].id
    form.value.proName = selectRecords[0].name
    form.value.proCustom = selectRecords[0].custom

}
const submit = () => {
    formRef.value.validate().then(() => {
        handleFinish(form.value)
    }).catch((err) => {

    });
}
const handleFinish = (values) => {

    console.log("handleFinish", values);
    if (!form.value.id) {
        api.add(values).then(() => {
            onClose(true);
        })
    } else {
        values.id = form.value.id;
        api.edit(values).then(() => {
            onClose(true);
        })
    }
};
const isEdit = ref(false)
const show = (record) => {
    if (record) {
        form.value = { ...record }
        isEdit.value = true;
        // uploadRef.value.bind(record.files)
    } else {
        form.value = {}
        isEdit.value = false
        uploadRef.value.clear()
    }
}

defineExpose({
    submit,
    show,
    isEdit
})

const emits = defineEmits(['OnClose'])
const onClose = (refresh) => {
    uploadRef.value.clear()
    emits('OnClose', refresh)
};

</script>